<script setup lang="ts">
import { ref, watch } from 'vue'
import { CloseBold } from '@element-plus/icons-vue'
import * as video from '@/apis/video'

const loginBoxPage = ref(0)

const props = defineProps(['show'])
const emits = defineEmits(['close'])

const showLoginBox = ref(props.show)

watch(
  () => props.show,
  e => {
    showLoginBox.value = e
  }
)

const loginData = ref({
  user: '',
  password: '',
  r_user: '',
  r_password: '',
  r_password_confirm: ''
})

function checkReqData(e: any) {
  if (e.code != 200) {
    console.log(e.msg)
    ElMessage(e.msg)
    return false
  }
  return true
}

function login() {
  if (/[^\x00-\xff]/g.test(loginData.value.user) || loginData.value.user.length < 6) {
    ElMessage('请输入正确的账户名')
    return
  }
  if (loginData.value.password.length < 8) {
    ElMessage('请输入正确的密码')
    return
  }
  video.login(loginData.value.user, loginData.value.password).then(res => {
    console.log(res.data)
    if (checkReqData(res.data)) window.location.reload()
  })
}

function register() {
  if (/[^\x00-\xff]/g.test(loginData.value.r_user) || /[^\x00-\xff]/g.test(loginData.value.r_password)) {
    ElMessage('不能存在中文及中文字符')
    return
  }
  if (loginData.value.r_user.length < 6) {
    ElMessage('账户名长度不得低于6位')
    return
  }
  if (loginData.value.r_password.length < 8) {
    ElMessage('密码长度不得低于8位')
    return
  }
  if (loginData.value.r_password_confirm != loginData.value.r_password) {
    ElMessage('确认密码与密码不匹配')
    return
  }
  video.register(loginData.value.r_user, loginData.value.r_password, loginData.value.r_password_confirm).then(res => {
    if (checkReqData(res.data)) {
      ElMessage({
        message: '注册成功',
        type: 'success'
      })
      loginBoxPage.value = 0
      loginData.value.user = loginData.value.r_user
    }
  })
}

function close_() {
  // showLoginBox.value=false
  emits('close')
}
</script>

<template>
  <div class="login" v-if="showLoginBox">
    <div class="login-box">
      <div class="login-box-header">
        <div></div>
        <el-icon @click="close_" class="login-box-header-close"><CloseBold /></el-icon>
      </div>
      <div class="login-box-body">
        <div class="login-box-select">
          <div class="login-box-select-item" :class="{ 'login-box-select-itemit': loginBoxPage == 0 }" @click="loginBoxPage = 0">账号登录</div>
          <div class="login-box-select-item" :class="{ 'login-box-select-itemit': loginBoxPage == 1 }" @click="loginBoxPage = 1">注册账号</div>
        </div>
        <div v-if="loginBoxPage == 0">
          <div class="login-box-inputBox">
            <el-input v-model="loginData.user" placeholder="账户" />
          </div>
          <div class="login-box-inputBox">
            <el-input v-model="loginData.password" type="password" placeholder="密码" show-password />
          </div>
          <div style="margin-top: 60px">
            <button @click="login" class="login-button">登录</button>
          </div>
        </div>
        <div v-else>
          <div class="login-box-inputBox">
            <el-input v-model="loginData.r_user" placeholder="账户" />
          </div>
          <div class="login-box-inputBox">
            <el-input v-model="loginData.r_password" type="password" placeholder="密码" show-password />
          </div>
          <div class="login-box-inputBox">
            <el-input v-model="loginData.r_password_confirm" type="password" placeholder="确认密码" show-password />
          </div>
          <div style="margin-top: 40px">
            <button class="login-button" @click="register">注册</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.login {
  background: rgba(0, 0, 0, 0.9);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;

  &-box {
    position: absolute;
    background: rgb(42, 42, 50);
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    border-radius: 10px;

    &-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 15px;
      color: #888;

      &-close {
        cursor: pointer;
        font-size: 17px;

        &:hover {
          color: #fff;
        }
      }
    }
    &-select {
      display: flex;
      justify-content: center;
      margin-bottom: 40px;
      &-item {
        padding: 20px;
        cursor: pointer;
        color: #aaa;
        font-size: 19px;

        &it {
          color: #fff;
          position: relative;
          font-weight: bold;

          &::after {
            content: '';
            display: block;
            position: absolute;
            left: 50%;
            bottom: 10px;
            transform: translateX(-50%);
            width: 50px;
            height: 3px;
            background: #fff;
            border-radius: 5px;
          }
        }
      }
    }
    &-body {
      padding: 0 50px;
      height: 400px;
      width: 380px;
    }

    &-inputBox {
      display: flex;
      align-items: center;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      // padding-bottom: 10px;
      margin-bottom: 20px;
      width: 100%;
      position: relative;

      input {
        background: none;
        font-size: 15px;
        outline: none;
        width: 100%;
        padding: 10px 0;
      }
    }

    .login-button {
      width: 100%;
      font-size: 17px;
      padding: 10px;
      border-radius: 70px;
      background: rgba(1, 206, 205, 1);
      cursor: pointer;
    }
  }
}
</style>
